<template>
  <div>
      <p style="margin-bottom:10px;">选择要查看的月份</p>
    <DatePicker type="month" placeholder="选择要查看的月份" v-model="forDate" @on-change="change" :options="options3" style="width: 200px"></DatePicker>
   <Table :columns="columns" :data="data" ref="table"></Table>
  </div>
</template>

<script>
import api from '../../api/index.js'
  export default {
    name:'wage',
    data () {
      return {
                options3: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now() ;
                    }
                },
                forDate:new Date(),
                columns: [ //管理员的表格相关配置
                    {
                        title: '名字',
                        key: 'Name'
                    },
                    {
                        title: '基本工资',
                        key: 'BasicWage'
                    },

                    {
                        title: '奖惩',
                        key: 'inDate',
                        render: (h, params) => {
                          return h('div',params.row.inDate.State=='punish'?`-${params.row.inDate.Money}`:`+${params.row.inDate.Money}`)
                        }
                    },
                    {
                        title: '应发工资',
                        key: 'FactWage'
                    },
                    {
                        title: '分发与否',
                        key: 'Pay',
                         render: (h, params) => {
                          return h('div',{style:{color:params.row.Pay=='true'?``:'red',fontWeight: 'bold'}},params.row.Pay=='true'?`已发`:`未发`)
                        }

                    },
                    {
                        title: '操作',
                        width: 300,
                        align: 'center',
                        render: (h, params) => {
                            return params.row.Pay=='false'?h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                          this.pay(params.row)
                                        }
                                    }
                                }, '发工资')])
                        :h('div','')}}
                ],
                data: [],//员工列表
      };
    },
    mounted() {
        this.getData(this.getDate(this.forDate))
    },
    methods: {
       async getData(yearAndMonth){
        this.data=await  api.wageList(yearAndMonth).then(res=>res)
        },
        getDate(date) {
            return {year:date.getFullYear(),month:date.getMonth() + 1};
        },
        change(){
             this.getData(this.getDate(this.forDate)) 
        },
        pay(data){
              this.$Modal.confirm({
                    title: '确定发放工资吗？',
                    content: '<p>确定发放工资吗？</p>',
                    okText: '确定',
                    cancelText: '取消',
                    onOk:async()=>{
                       let req={
                            EmployeeGuid: data.EmployeeGuid,
                                BasicWage: data.BasicWage,
                                EncouragementPunishType: data.inDate.State,
                                EncouragementPunish: data.inDate.Money,
                                FactWage: data.FactWage,
                                Year:this.getDate(this.forDate).year,
                                Month:this.getDate(this.forDate).month
                        }
                        console.log(req)
                        await api.pay(req).then(res=>res)
                        this.getData(this.getDate(this.forDate)) 
                    }
                });
        }
    },
    watch: {
    },
  }
</script>
<style lang='' scoped>

</style>